<!-- 歌单广场 -->
<template>
  <!-- 头部 -->
  <van-header title="歌单广场" :left-arrow="true"></van-header>
  <div class="section">
    <van-my-tab :list="tab" @handleChangeContent="handleChangeContent"></van-my-tab>
    <div class="loading" v-if="tabContent.length == 0">
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>
    <van-floor-defaut :list="tabContent" v-else></van-floor-defaut>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import VanHeader from '@/components/header/Header.vue';
import VanMyTab from '@/components/tabs/Tab.vue';
import VanFloorDefaut from '@/components/floor/FloorDefaut.vue';

import { getPlayListHighqualityTags, getTopPlayListHighquality } from '@/api/wangyi/playlist';

import moretag from '@/api/mock/more-playlist-tag.json';

const tab = ref(moretag.tags);
const tabContent = ref([]);

onMounted(() => {
  // getPlayListHighqualityTags().then(res => {
  //   console.log(res);
  //   tab.value = res.tags;
  // });
  getTopPlayListHighquality().then(res => {
    // console.log(res);
    tabContent.value = res.playlists;
  });
});

function handleChangeContent(item) {
  console.log(item);
  tabContent.value = [];
  getTopPlayListHighquality({ cat: item.name }).then(res => {
    // console.log(res);
    tabContent.value = res.playlists;
  });
}
</script>

<style lang="less" scoped>
.section {
  padding: 12px;
}
</style>
